<template>
	<view class="page" :style="{minHeight:windowHeight+'px'}">
		<!-- <view class="item" v-if="listData != 0">
			<view class="item_head">
				2015年6月
			</view>
			<view class="item_con" v-for="(item,index) of dealData" :key="index">
				<view class="item_date">{{item.date}}  <text></text></view>
				<view class="item_data">
					<view class="item_teil">
						<view class="item_type">
							{{item.dealType}} - {{item.dealTailnum}}
						</view>
						<view class="item_time">{{item.time}}</view>
					</view>
					<view class="item_prise"> - {{item.dealMoney}}<text>{{item.code}}</text></view>
				</view>				
			</view>
		</view> -->
		<!-- <view class="head-screen">
			<view class="item-seek">
				<image src="../../../static/seek.png"></image>
				<input type="text" v-model="inquire" @input="getInquire(inquire)"  placeholder="输入姓名/手机号查询" />
				<view>
					输入姓名/手机号查询
				</view>
			</view>
			<view class="item_screen" @click="open">
				<image src="../../../static/screen.png"></image>
			</view>
		</view> -->
		<view class="head-item">
			<view class="head-tab" >
				<view class="tab" :class="welfareListId==='' ? 'active tab' : ''"  @click="tabTypeFunc('')">
					全部
				</view>
				<view class="image-item" v-show="welfareListId==''">
					<image class="tab-iamge" src="../../../static/tab-iamge.png"></image>
				</view>
			</view>
			
			<view class="head-tab" v-for="(item,index) of welfareList">
				<view class="tab" :class="welfareListId===item.id ? 'active tab' : ''" @click="tabTypeFunc(item.id)">
					{{item.welfare_name}}
				</view>
				<view class="image-item" v-show="welfareListId===item.id">
					<image class="tab-iamge" src="../../../static/tab-iamge.png"></image>
				</view>
			</view>
		</view>
		<!-- <view class="item">
			<view class="item-head">
				<text>车检福利</text>
				<view>2020-2-2 20:20:20</view>
			</view>
			<view class="line"></view>
			<view class="item-name">
				<view>名字</view>
				<view>手机号</view>
			</view>
			<view class="item-address">地址</view>
			<view class="remark">
				备注:<input type="text" disabled="" placeholder="网络始终连接不上，无法访问"   />
			</view>
		</view> -->
		<view class="item" v-for="(item,index) of welfareData" :key="index">
			<view class="item-head">
				<text>{{item.welfares.welfare_name}}</text>
				<view>{{item.create_time}}</view>
			</view>
			<view class="line"></view>
			<view class="item-name">
				<view>{{item.realname}}</view>
				<view>{{item.phone}}</view>
			</view>
			<view class="item-address">地址:  {{item.address}}</view>
			<view class="remark">
				备注:<input type="text" disabled="" :value="item.remark" placeholder=""   />
			</view>
		</view>
		<!-- 没有记录 -->
		<view class="d-c-c p30" v-if="welfareData.length == 0">
			<text class="iconfont icon-wushuju"></text>
			<text class="cont">亲，暂无相关记录哦</text>
		</view>
		<view v-else v-show="isLoadMore">
			<uni-load-more :loadingType="loadding"></uni-load-more>
		</view>
		<!-- <uni-load-more v-else :loadingType="loadingType"></uni-load-more> -->
		<!-- <calendar ref="calendar" :insert="false" @confirm="confirm"></calendar>
		<button @click="open">打开日历</button> -->
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more.vue';
	import calendar from '../../../components/uni-calendar/uni-calendar.vue'
	export default {
		components: {
			calendar,
			uniLoadMore
		},
		data() {
			return {
				isLoadMore: false, //是否加载中
				page: 1,
				pagesize: 10,
				loadding:0,
				listData:1,
				loading:false,
				dealData:[
					{
						id:1001,
						date:'06日',//交易日期
						time:'11:22:22',//交易时间
						dealTailnum:'尾号6666',//交易尾号
						dealType:'提现',//交易类型
						dealMoney:'3000.00',//交易金额
						code:'',
						idx:0
					},
					{
						id:1002,
						date:'22日',//交易日期
						time:'12:22:22',//交易时间
						dealTailnum:'尾号8888',//交易尾号
						dealType:'提现',//交易类型
						dealMoney:'5000.00',//交易金额
						code:'交易失败',
						idx:1
					},
				],
				windowHeight:'',
				// nav: [
				// 	{
				// 		name: '车检福利',
				// 		id: 2,
				// 		idx: 1
				// 	},
				// 	{
				// 		name: '保养福利',
				// 		id: 3,
				// 		idx: 2
				// 	},
				// 	{
				// 		name: '轮胎保养',
				// 		id: 4,
				// 		idx: 3
				// 	},
				// 	{
				// 		name: '跑腿',
				// 		id: 5,
				// 		idx: 4
				// 	},
				// ],
				// idx:'',
				type:1,//交易类型1为全部
				welfareData:[],
				timeScreen:'',//筛选的时间
				inquire:'',//查询的内容
				welfareList:'',//导航
				welfareListId:'',//id
			};
		},
		onLoad() {
			this.getData();
			this.getDataNum();
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight
				}
			})
		},
		onPullDownRefresh() {
			this.page = 1;
			this.welfareData = [];
			this.getData();
			this.getDataNum();
			setTimeout( () => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() { //上拉触底函数
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.page += 1
				this.getData();
			}
		},
		methods:{
			/*tab切换*/
			tabTypeFunc(e) {
				if (e != this.welfareListId) {
					this.page = 1;					this.welfareData = [];
					this.welfareListId = e;
					this.getData();
				}
			},
			/* 获取福利列表 */
			getDataNum() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get('welfare.welfare/get_list',
				{
					
				}, 
				function(res) {
					
					self.welfareList = res.data.list;
					
					//self.detail = res.data.userInfo;
					uni.hideLoading();
				});
			},
			getInquire(e){
				if(e != this.inquire){
					
				}
				//console.log(e);
				//this.inquire = e;
				console.log(this.inquire)
			},
			open() {
				this.$refs.calendar.open();
			},
			/* 所选择的日期 */
			confirm(e) {
				console.log(e.fulldate);
				this.timeScreen = e.fulldate;
			},
		
			/* 获取交易记录列表 */
			getData() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get('welfare.welfare/get_user_welfare', 
				{
					welfare_id:self.welfareListId,
					page:self.page
				}, 
				function(res) {
					//console.log(res)
					//self.welfareData = res.data.list.data;
					if (res.data.list.data) {
						self.welfareData = self.welfareData.concat(res.data.list.data)
						if (res.data.list.data.length < res.data.list.per_page) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
							self.isLoadMore = true
							self.loadding = 2
						} else {
							self.isLoadMore = false
						}
					} else {
						self.isLoadMore = true
						self.loadding = 2
					}
					//console.log(self.welfareData)
					//self.detail = res.data.userInfo;
					uni.hideLoading();
				});
			},
		}
	}
</script>

<style lang="scss">
@import 'dealingSlip.scss';

.item{
	width: 90%;
	margin: 20rpx auto;
	background-color: #FFFFFF;
	padding: 20rpx;
}
.item-head{
	display: flex;
	//flex-direction: column;
	align-items: center;
	justify-content: space-between;
	//border-bottom: 2rpx solid #DEDEDE;
}
.item-head text{
	font-size: 32rpx;
	font-weight: 800;
}
.line{
	margin-top: 20rpx;
	width: 100%;
	height: 2rpx;
	background-color: #DEDEDE;
}
.item-name{
	margin-top: 30rpx;
	display: flex;
	align-items: center;
	color: #989898;
	font-size: 32rpx;
}
.item-name view{
	margin-right: 20rpx;
}
.item-address{
	margin: 26rpx 0;
	//color: #989898;
	font-size: 32rpx;
}
.remark{
	width: 96%;
	padding: 0 20rpx;
	height: 74rpx;
	line-height: 74rpx;
	display: flex;
	align-items: center;
	background-color: #f5ffe9;
	color: #989898;
	margin-top: 30rpx;
	margin-bottom: 20rpx;
	font-size: 26rpx;
}
.remark input{
	font-size: 26rpx;
	color: #989898;
	margin-left: 10rpx;
	width: 580rpx;
}
// .item_head{
// 	margin: 50rpx 40rpx 30rpx;
// 	font-size: 30rpx;
// }
// .item_con{
// 	//width: 90%;
// 	margin: 0 auto;
// 	background-color: #FFFFFF;
// 	padding: 20rpx;
// 	display: flex;
// 	flex-direction: row;
// 	align-items: center;
// }
// .item_date{
// 	width: 110rpx;
// 	font-size: 30rpx;
// 	color: #888888;
// }
// .item_date text{
// 	border-left: 2rpx solid #b3b3b3;
// 	margin: 0 15rpx;
// }
// .item_data{
// 	width: 100%;
// 	display: flex;
// 	flex-direction: row;
// 	justify-content: space-between;
// 	align-content: center;
// }
// .item_time{
// 	color: #b5b5b5;
// }
// .item_prise{
// 	font-size: 30rpx;
// 	font-weight: 800;
// 	display: flex;
// 	flex-direction: column;
// 	align-items: center;
// }
// .item_prise text{
// 	font-size: 26rpx;
// 	color: #ff000c;
// }
</style>
